<template>
  <view class="xxm-home">
    <!-- 轮播图 -->
    <swiper class="banner" autoplay circular :interval="2000">
      <swiper-item class="banner-item">
        <image class="image" src="@/assets/images/banner1.jpg" mode="widthFix" />
      </swiper-item>
      <swiper-item class="banner-item">
        <image class="image" src="@/assets/images/banner2.jpg" mode="widthFix" />
      </swiper-item>
      <swiper-item class="banner-item">
        <image class="image" src="@/assets/images/banner3.jpg" mode="widthFix" />
      </swiper-item>
    </swiper>
    <!-- 公告 -->
    <view class="notice">
      <view class="prefix">
        <uni-icons class="icon" type="sound-filled" size="20" color="#2bb38f"></uni-icons>
        <text class="text">公告</text>
      </view>
      <view class="content">
        <swiper class="swiper" autoplay circular vertical :interval="2000">
          <swiper-item class="swiper-item">
            <view class="text">欢迎使用咸虾米壁纸，欢迎使用咸虾米壁纸</view>
          </swiper-item>
          <swiper-item class="swiper-item">
            <view class="text">欢迎使用咸虾米壁纸，欢迎使用咸虾米壁纸</view>
          </swiper-item>
          <swiper-item class="swiper-item">
            <view class="text">欢迎使用咸虾米壁纸，欢迎使用咸虾米壁纸</view>
          </swiper-item>
        </swiper>
      </view>
      <view class="suffix">
        <uni-icons class="icon" type="right" color="#969696" size="20" />
      </view>
    </view>
    <!-- 每日推荐 -->
    <view class="recommend">
      <CommonHeader title="每日推荐">
        <template #right>
          <view class="date">
            <uni-icons type="calendar" color="#2bb38f" size="24" />
            <uni-dateformat :date="Date.now()" format="dd号"></uni-dateformat>
          </view>
        </template>
      </CommonHeader>
      <scroll-view class="recommend-list" enable-flex :scroll-x="true">
        <view class="recommend-wallpaper">
          <image class="image" src="@/assets/images/preview_small.webp" mode="scaleToFill" />
        </view>
        <view class="recommend-wallpaper">
          <image class="image" src="@/assets/images/preview_small.webp" mode="scaleToFill" />
        </view>
        <view class="recommend-wallpaper">
          <image class="image" src="@/assets/images/preview_small.webp" mode="scaleToFill" />
        </view>
        <view class="recommend-wallpaper">
          <image class="image" src="@/assets/images/preview_small.webp" mode="scaleToFill" />
        </view>
        <view class="recommend-wallpaper">
          <image class="image" src="@/assets/images/preview_small.webp" mode="scaleToFill" />
        </view>
        <view class="recommend-wallpaper">
          <image class="image" src="@/assets/images/preview_small.webp" mode="scaleToFill" />
        </view>
        <view class="recommend-wallpaper">
          <image class="image" src="@/assets/images/preview_small.webp" mode="scaleToFill" />
        </view>
        <view class="recommend-wallpaper">
          <image class="image" src="@/assets/images/preview_small.webp" mode="scaleToFill" />
        </view>
        <view class="recommend-wallpaper">
          <image class="image" src="@/assets/images/preview_small.webp" mode="scaleToFill" />
        </view>
        <view class="recommend-wallpaper">
          <image class="image" src="@/assets/images/preview_small.webp" mode="scaleToFill" />
        </view>
      </scroll-view>
    </view>
    <!-- 专题精选 -->
    <view class="special">
      <CommonHeader title="专题精选" />
      <view class="special-plate">
        <Card
          url="#"
          moreText="更多"
          title="明星美女"
          tagContext="·一个月前更新"
          picUrl="/src/assets/images/classify1.jpg"
        />
        <Card
          url="#"
          moreText="更多"
          title="明星美女"
          tagContext="·一个月前更新"
          picUrl="/src/assets/images/classify1.jpg"
        />
        <Card
          url="#"
          moreText="更多"
          title="明星美女"
          tagContext="·一个月前更新"
          picUrl="/src/assets/images/classify1.jpg"
        />
        <Card
          url="#"
          moreText="更多"
          title="明星美女"
          tagContext="·一个月前更新"
          picUrl="/src/assets/images/classify1.jpg"
        />
        <Card
          url="#"
          moreText="更多"
          title="明星美女"
          tagContext="·一个月前更新"
          picUrl="/src/assets/images/classify1.jpg"
        />
        <Card
          url="#"
          moreText="更多"
          title="明星美女"
          tagContext="·一个月前更新"
          picUrl="/src/assets/images/classify1.jpg"
        />
        <Card
          url="#"
          moreText="更多"
          title="明星美女"
          tagContext="·一个月前更新"
          picUrl="/src/assets/images/classify1.jpg"
        />
        <Card
          url="#"
          moreText="更多"
          title="明星美女"
          tagContext="·一个月前更新"
          picUrl="/src/assets/images/classify1.jpg"
          :is-more="true"
        />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import CommonHeader from '@/components/CommonHeader/index.vue';
  import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue';
  import uniDateformat from '@dcloudio/uni-ui/lib/uni-dateformat/uni-dateformat.vue';
  import Card from '@/components/Card/index.vue';
  defineOptions({
    name: 'Home'
  });
</script>

<style lang="scss" scoped>
  .xxm-home {
    padding-bottom: calc(env(safe-area-inset-bottom) + 50rpx);
    .banner {
      margin: 30rpx 0;

      height: 345rpx;

      &-item {
        overflow: hidden;
        padding: 0 30rpx;
        box-sizing: border-box;
      }

      .image {
        overflow: hidden;
        width: 100%;
        border-radius: 16rpx;
      }
    }

    .notice {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 30rpx;
      padding: 0 30rpx;
      height: 82rpx;
      background-color: #f9f9f9;
      border-radius: 42px;

      .prefix {
        display: flex;
        align-items: center;
        color: #2bb38f;
        .text {
          font-size: 28rpx;
        }
      }

      .content {
        flex: 1;
        margin-left: 30rpx;

        color: #646464;

        .swiper {
          height: 82rpx;

          &-item {
            line-height: 82rpx;
            .text {
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
    .recommend {
      &:deep(.xxm-common-header) {
        padding: 0 30rpx;
      }

      .date {
        display: flex;
        align-items: center;
        font-size: 32rpx;
        color: #2bb38f;
      }

      &-list {
        white-space: nowrap;
        margin-top: 38rpx;
      }

      &-wallpaper {
        overflow: hidden;
        display: inline-block;
        width: 200rpx;
        aspect-ratio: 1 / 2;
        margin-left: 30rpx;
        border-radius: 10rpx;

        + .recommend-wallpaper {
          margin-left: 10rpx;
        }

        &:last-child {
          margin-right: 30rpx;
        }

        .image {
          width: 100%;
        }
      }
    }

    .special {
      &:deep(.xxm-common-header) {
        padding: 0 30rpx;
      }

      &-plate {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15rpx;
        margin-top: 36rpx;
        padding: 0 30rpx;

        &-item {
        }
      }
    }
  }
</style>
